//我要发贴
Vue.component('posting', {
	template: '<div class="posting">\
					<form id="addfourm" class="form-horizontal">\
							<div class="form-group">\
							<label for="inputEmail3" style="padding-top: 17px;" class=" control-label">标签：</label>\
							<div class="col-sm-10">\
									<div class="select_label">\
										<li v-for="(item,index) in select_labels" @click="removeLabel(item,index)">{{item.TagName}}</li>\
										<button type="button" @click="all_labels_isShow = !all_labels_isShow" class="btn btn-primary">\
							      		    <span v-show="!all_labels_isShow">添加标签</span>\
							      		    <span v-show="all_labels_isShow">关闭标签</span>\
							      		</button>\
									</div>\
									<div class="all_label" v-show="all_labels_isShow">\
										<li v-for="(item,index) in all_labels" @click="selectLabel(item,index)">{{item.TagName}}</li>\
									</div>\
									<li class="danger" style="padding:5px 0" v-show="select_labels_show">至少选择一个标签</li>\
								</div>\
							</div>\
							<div class="form-group">\
								<label for="inputPassword3" class=" control-label">主题：</label>\
								<div class="col-sm-10">\
									<input v-model="title" name="title" type="text" class="form-control" id="inputPassword3" placeholder="这里是发帖的主题">\
								</div>\
							</div>\
							<div class="form-group">\
								<label for="inputPassword3" class=" control-label">内容：</label>\
								<div class="col-sm-10">\
									<textarea v-model="content" name="content" class="form-control" rows="3"></textarea>\
								</div>\
							</div>\
							<div class="form-group">\
								<label for="inputPassword3" class=" control-label">图片：</label>\
								<div class="imgs" style="display:inline-block">\
									<div>\
										<div class="img" v-for="item in images">\
											<img  v-bind:src="item" alt="..." onload="globalData.utils.img_onload(event)" class="transform_center img-rounded">\
										</div>\
										<div class="img add my_flex my_flex_center">\
											<img src="imgs/community/add.png" alt="" />\
											<input type="file" @change="addImg($event)" class="upload_input" />\
										</div>\
									</div>\
								</div>\
							</div>\
							<div class="form-group">\
								<div class=" col-sm-2 submit">\
									<button type="button" class="btn btn-base" @click="release">发 布</button>\
								</div>\
							</div>\
						</form>\
	    </div>',
	data: function() {
		return {
			all_labels: [],
			select_labels: [],
			select_labels_show:false,
			all_labels_isShow: false,
			url: {
				getLable: '/api/ForumTag/GetAllForumTags',
				addForum: '/api/Forum/AddForum',
				//http://120.25.212.63:8080/api/Forum/AddForumPath
			},
			title: "",
			content: "",
			images: [],
			photo:""
		}
	},
	watch:{
		select_labels:function(val,oldval){
			var bool = val.length<=0
			this.select_labels_show = bool
		}
	},
	mounted: function() {
		this.getLable();
		$(function() {
			$('#addfourm').bootstrapValidator(posting_valid_json);
		});
		
	},
	methods: {
		addImg: function(e) {
			var that = this;
			var dom = e.target;
			var file = e.target.files[0]
			var oFReader = new FileReader();
			oFReader.readAsDataURL(file);
			oFReader.onload = function(oFREvent) {
				var s = oFREvent.target.result;
				var index = s.indexOf(',')
				var t = s.substring(index+1,s.length)
				that.images = [s];
				that.photo = t
				var html = '<input type="file" @change="addImg($event)" id="upload_input" class="upload_input" />'
				console.log(dom)
				$(dom).parent('div').append(html)
				$(dom).remove()
				$("#upload_input").change(function(ev){
					that.addImg(ev)
				})
				
				
			};
		},
		getLable: function() {
			var that = this;
			globalData.ajaxPost(this.url.getLable, null, function(res) {
				var d = res.data;
				if(d == null)
					return;
				for(var i = 0; i < d.length; i++) {
					var h = d[i].HeadImage;
					if(h != null)
						d[i].HeadImage = globalData.constParam.url.baseUrl + "/" + h;
				}
				that.all_labels = d;
			})
		},
		//添加标签
		selectLabel: function(item, index) {
			this.select_labels.push(item)
			this.all_labels.splice(index, 1)
		},
		//移除标签
		removeLabel: function(item, index) {
			this.all_labels.push(item)
			this.select_labels.splice(index, 1)
		},
		//清除标签
		clearLabled: function(item, index) {
			$.extend(this.all_labels, this.select_labels);
			this.select_labels = [];
		},
		//发帖
		release: function() {
			$('#addfourm').bootstrapValidator('validate');
			var b = $('#addfourm').data("bootstrapValidator").isValid();
			if(b) {
				var tagNames = "";
				var tagIds = "";
				var len = this.select_labels.length;
				if(len<=0){
					this.select_labels_show = true;
					return;
				}
				for(var i = 0; i < len; i++) {
					var d = this.select_labels[i];
					if(d != null) {
						tagNames += d.TagName + ",";
						tagIds += d.ID + ",";
					}
				}
				tagNames = tagNames.substring(0, tagNames.length - 1);
				tagIds = tagIds.substring(0, tagIds.length - 1);
				var data = {
					title: this.title,
					content: this.content,
					ForumTagID: tagIds,
					ForumTagName: tagNames,
					Image: this.photo
				};
				globalData.ajaxPost(this.url.addForum, data, function(res) {
					//发帖后的回调
					if(res.suc) {
						globalData.utils.alert("发贴成功",function(){
							$("#alert").modal("hide")
							$(".my_post").click()
						});
					}
				});
			}
		}
	}
});

var posting_valid_json = {
	message: 'This value is not valid',
	feedbackIcons: {
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	},
	fields: {
		title: {
			validators: {
				notEmpty: {
					message: '帖子标题不能为空 '
				}
			}
		},
		content: {
			validators: {
				notEmpty: {
					message: '内容不能为空'
				}
			}
		}
	}
}